<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绑定样式</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>



    <div id="root">

        <button @click="addSex">添加一个性别属性，默认值是男</button>

        <span>姓名:{{student.name}}</span>
        <span>年龄：{{student.age.rage}}</span>
        <!--v-if判断student.sex下面有sex自己展示，没有不展示-->
        <span v-if="student.sex">性别:{{student.sex}}</span>

        <ul>
            <li v-for="(item,index) in student.hobby" :key="index">
                {{item}}
            </li>
        </ul>
        <button @click="addSex">修改数组的值</button>

        <ul>
            <li v-for="(item,index) in student.friend" :key="index">
                {{item.name}}--{{item.age}}
            </li>
        </ul>


    </div>

    <script>
        //用计算属性实现
        const vm = new Vue({
            el: '#root',
            data: {
                student: {
                    name: "邓紫棋",
                    age: {
                        rage: 31,
                        sAge: 29,
                    },
                    //数组在遍历后数据被拿到vm上，每一行不会生成set，get方法：所以当修改数据的某一行数据时被修改时，无法去修改data的数据，页面也就不会更新，
                    //所以要修改或添加数组中的数据时，得用数组的方法去修改,vm才会检测到修改了数据，
                    //数组常用方法:push,pop(),shift,unshift,splice,sort,reverse
                    //其实Vue身上的;push,pop(),shift,unshift,splice,sort,reverse不是原生里面方法,是Vue对原生里面的方法重写了

                    hobby: ["唱跳", "篮球", "rap"],
                    // hobby: {
                    //     h: "唱跳",
                    //     P: "篮球",
                    //     y: 'rap'
                    // },
                    friend: [{
                            name: 'jerry',
                            age: 35
                        }, {
                            name: 'tony',
                            age: 36
                        }

                    ]
                }
            },
            methods: {
                addSex() {
                    // this.student.hobby[0] = "niu" 这样做不能修改响应式页面变化,保存的_DATA中没有匹配每一项的set，get方法，
                    //  this.student.hobby.push("牛逼") //调用数组的方法可以修改
                    // this.student.hobby.splice(1, 1, "爱美女") //splice(开始的索引值,删除的数量，切换的内容)

                    //2.也可以用Vue.set/vm.$set()来实现数组的修改
                    Vue.set(this.student.hobby, 1, "爱美女") //数组也是对象的一种所以,Vue.set也可以使用

                }
            },
        })

        console.log(vm)
    </script>
    <style>

    </style>
</body>

</html>